<template>
	<u-popup :show="isShow" mode='bottom' round='12' @close='close' closeable>
		<view style="min-height: 300rpx;padding: 30rpx;border-radius: 12rpx;">
			<view style="display: flex;flex-direction: row;align-items: center;">
				<image :src="clientInfo.logo" style="width: 40rpx;height: 40rpx;border-radius: 20rpx;"></image>
				<view>
					<text style="margin-left: 16rpx;font-size: 26rpx;">{{ clientInfo.appname }}</text><text style="margin-left: 12rpx;font-size: 26rpx;">申请</text>
				</view>
				
			</view>
			<u--form :model="formModel" ref="fromRules" label-width='100'>
				<u-form-item label="头像" borderBottom>
					<view style="width: 200rpx;">
						<button @chooseavatar='bindchooseavatar' icon='share' type="default" open-type='chooseAvatar' plain style="border: 0px solid #FFFFFF;">
							<image style="width: 140rpx;height: 140rpx;border-radius: 70rpx;" :src="formModel.avatarUrl || 'https://ky.railshj.cn/protocol/icon/images/mine/mine_avatar.png'"
						 mode="aspectFill"></image>
						</button>
					</view>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname" borderBottom rightIcon='arrow-right'><input @blur='blurChange' type="nickname" :value="formModel.nickname" placeholder='请输入昵称' maxlength='8' border="none"/></u-form-item>
			</u--form>
			<view class="confim" @click="confim">确 认</view>
		</view>
	</u-popup>
</template>

<script>
	import {uploadApi} from '@/api/baseUrl.js'
	export default {
		props:{

		},
		data() {
			return {
				isShow: false,
				formModel: {},
				clientInfo: {}
			}
		},
		created() {
			
		},
		methods: {
			show(){
				this.isShow = true
				this.clientInfo = this.$storage.getStorageDataSync(this.$store.state.clientInfo)
			},
			close(){
				this.isShow = false
			},
			confim(){
				this.$emit('confim')
			},
			blurChange(e){
				this.formModel.nickname = e.detail.value
			},
			bindchooseavatar(e){
				// console.log('获取头像', e)
				uni.uploadFile({
					url: uploadApi,
					filePath: e.detail.avatarUrl,
					name: 'file',
					method: 'POST',
					timeout: 30000,
					header: {
						"clientname": this.$store.state.clientname,
						'Authorization': 'token ' + this.$storage.getStorageDataSync(this.$store.state.token),
						'content-type': 'multipart/form-data' // 走网关的接口,一定要加上这个,要不支付宝小程序上传不成功
					},
					success: (uploadFileRes) => {
						// console.log('uploadFileRes', uploadFileRes.data)
						var res = JSON.parse(uploadFileRes.data)
						// console.log('res', res)
						if (res.code == 10000) {
							// resolve(res);
							this.formModel.avatarUrl = res.data.url
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loveCate {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 710rpx;
		height: 160rpx;
		border-radius: 14rpx;
		margin-left: 20rpx;
		background-color: #FFFFFF;
	
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 234rpx;
			font-size: 28rpx;
			position: relative;
			color: #666666;
			.titleL {
				margin-top: 10rpx;
			}
		}
	}
	.confim{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #dd524d;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 80rpx;
		margin-bottom: 80rpx;
		border-radius: 44rpx;
	}
</style>
